<template>
  <div>
    <comp-header>
      <template v-slot:left>
        <img src="../assets/logo.png" alt="" />
      </template>
      <template v-slot:right>
        <span>小叮当音乐盒~</span>
      </template>
    </comp-header>
    <!-- 导航 -->
    <nav class="dd-nav">
      <ul>
        <li>
          <router-link to="/home" active-class="active" exact>首页</router-link>
        </li>
        <li>
          <router-link to="/home/recommend" active-class="active" exact
            >推荐音乐</router-link
          >
        </li>
        <li>
          <router-link to="/home/hotmusic" active-class="active" exact
            >热歌榜</router-link
          >
        </li>
        <li>
          <router-link to="/home/search" active-class="active" exact
            >搜索</router-link
          >
        </li>
      </ul>
    </nav>
    <div class="dd-content">
      <transition
        :duration="{ enter: 800, leave: 150 }"
        enter-class="animate__animated animate__lightSpeedInLeft"
        enter-to-class="animate__animated animate__lightSpeedInLeft"
        leave-class="animate__animated animate__lightSpeedOutRight"
        leave-to-class="animate__animated animate__lightSpeedOutRight"
      >
        <router-view />
      </transition>
    </div>
  </div>
</template>

<script>
import compHeader from "@/components/comp-header.vue";
export default {
  name: "Home",
  components: {
    compHeader,
  },
};
</script>

<style lang="less" scoped>
@fontColor: #2eb4ff;
@borderColor: #2eb4ff;
@bgColor: #5ab8ee;
.dd-nav {
  ul {
    width: 100%;
    height: 50px;
    border-bottom: 1px solid #ccc;
    display: flex;
    li {
      flex-grow: 1;
      flex-shrink: 0;
      text-align: center;
      line-height: 40px;

      a {
        display: inline-block;
        font-size: 16px;
        height: 47px;
        color: #040404;
        position: relative;
      }
      // .router-link-active {
      //   color: #2eb4ff;
      //   border-bottom: 2px solid #2eb4ff;
      // }
      .active {
        color: @fontColor;
        border-bottom: 1px solid @borderColor;
        &::after {
          content: "";
          display: block;
          width: 0;
          height: 0;
          border: 5px solid transparent;
          border-bottom-color: @borderColor;
          position: absolute;
          left: 50%;
          margin-left: -3px;
          bottom: 0;
        }
      }
    }
  }
}
.dd-content {
  height: 100%;
  width: 100%;
}
</style>